<!--
  * 收款单
  *
-->
<template>
  <!---------- 查询表单form begin ----------->
  <a-card size="small" :bordered="false" :hoverable="false" class="query-form-wrapper smart-margin-bottom10 smart-radius-2">
    <a-form>
      <a-row :gutter="[8, 10]">
        <a-col :span="5.5">
          <a-form-item label="单据日期" class="smart-margin-bottom0">
            <custom-range-picker v-model:value="queryForm.create_time" />
          </a-form-item>
        </a-col>
        <a-col :span="4">
          <a-form-item label="单据编号" class="smart-margin-bottom0">
            <a-input v-model:value.trim="queryForm.no" placeholder="单据编号" allow-clear />
          </a-form-item>
        </a-col>
        <a-col :span="4">
          <a-form-item label="交款人" class="smart-margin-bottom0">
            <a-input v-model:value.trim="queryForm.payee_name" placeholder="交款人" allow-clear />
          </a-form-item>
        </a-col>
        <a-col :span="4">
          <a-form-item label="流水单号" class="smart-margin-bottom0">
            <a-input v-model:value.trim="queryForm.trade_no" placeholder="流水单号" allow-clear />
          </a-form-item>
        </a-col>

        <a-col :span="5">
          <a-button-group>
            <a-button type="primary" html-type="submit" @click="onSearch" v-privilege="'goods:query'">
              <template #icon>
                <SearchOutlined />
              </template>
              查询
            </a-button>
            <a-button @click="resetQuery" v-privilege="'goods:query'">
              <template #icon>
                <ReloadOutlined />
              </template>
              重置
            </a-button>
            <SearchFormCollapse v-model="expand" />
          </a-button-group>
        </a-col>
        <template v-if="expand">
          <a-col :span="4">
            <a-form-item label="收款类型" class="smart-margin-bottom0">
              <EnumSelect enum-name="PAY_STATUS_ENUM" v-model:value="queryForm.pay_type" placeholder="收款类型" />
            </a-form-item>
          </a-col>
          <a-col :span="3">
            <a-form-item label="审核状态" class="smart-margin-bottom0">
              <EnumSelect enum-name="STATUS_TY_ENUM" v-model:value="queryForm.pay_type" placeholder="审核状态" />
            </a-form-item>
          </a-col>
        </template>
      </a-row>
    </a-form>
  </a-card>
  <!---------- 查询表单form end ----------->

  <a-card size="small" :bordered="false" :hoverable="true" class="query-table-wrapper">
    <!---------- 表格操作行 begin ----------->
    <a-row class="smart-table-btn-block">
      <div class="smart-table-operate-block">
        <a-button @click="addGoods" type="primary" v-privilege="'goods:add'">
          <template #icon>
            <PlusOutlined />
          </template>
          新建
        </a-button>
      </div>
      <div class="smart-table-setting-block">
        <TableOperator v-model="columns" :tableId="TABLE_ID_CONST.BUSINESS.ERP.GOODS" :refresh="queryData" />
      </div>
    </a-row>
    <!---------- 表格操作行 end ----------->
    <div class="table-wrapper">
      <a-table size="small" :dataSource="tableData" :columns="columns" rowKey="id" bordered :scroll="{ x: 'max-content', y: tableScrollY }" :pagination="false" :showSorterTooltip="false" :loading="tableLoading" :row-selection="{ selectedRowKeys: selectedRowKeyList, onChange: onSelectChange }">
        <template #bodyCell="{ text, record, column }">
          <template v-if="column.dataIndex === 'no'">
            <a @click="detail(record)">{{ text }}</a>
          </template>
          <template v-if="column.dataIndex === 'voucher'">
            <div class="smart-table-operate">
              <a-image :width="30" :src="text" />
            </div>
          </template>
          <template v-if="column.dataIndex === 'pay_type'">
            <span>{{ getDescByValue('PAY_STATUS_ENUM', text) }}</span>
          </template>
          <template v-if="column.dataIndex === 'status'">
            <span>{{ getDescByValue('STATUS_TY_ENUM', text) }}</span>
          </template>

          <template v-if="column.dataIndex === 'action'">
            <div class="smart-table-operate">
              <a-button @click="detail(record)" type="link" style="color: #97999c" v-privilege="'goods:update'">详情</a-button>
              <a-button @click="checkAction(record)" type="link" v-privilege="'goods:update'" v-if="record.status === 1 && record.pay_type === 2">审核</a-button>
            </div>
          </template>
        </template>
      </a-table>
    </div>

    <div class="smart-query-table-page query-table-page">
      <a-pagination showSizeChanger showQuickJumper show-less-items :pageSizeOptions="PAGE_SIZE_OPTIONS" :defaultPageSize="queryForm.limit" v-model:current="queryForm.page" v-model:pageSize="queryForm.limit" :total="total" @change="queryData" @showSizeChange="queryData" :show-total="() => `共${total}条`" />
    </div>
    <!-- 审核 -->
    <a-modal v-model:open="open" title="审核" @ok="handleOk">
      <div style="margin: 10px 0px">请输入交易流水号</div>
      <a-input v-model:value="trade_no" placeholder="请输入交易流水号" />
    </a-modal>

    <ReceiptFormModal ref="formModal" @reload-list="queryData" />
    <!---------- 详情 begin ----------->
    <ReceiptDetailsModal ref="detailRef" />
    <!---------- 详情 end ----------->
  </a-card>
</template>
<script setup lang="ts">
import CustomRangePicker from '@/components/business/custom-range-picker/index.vue'
import ReceiptDetailsModal from './components/receipt-details-modal.vue'
import ReceiptFormModal from './components/receipt-form-modal.vue'
import { message } from 'ant-design-vue'
import { paymentApi } from '@/api/business/finance/receipt-api'
import TableOperator from '@/components/support/table-operator/index.vue'
import EnumSelect from '@/components/framework/enum-select/index.vue'
import SearchFormCollapse from '@/components/support/search-form-collapse/index.vue'
import { useQuery } from '@/hooks/web/use-query-hook'
import { PAGE_SIZE_OPTIONS, DEFAULT_TIME_RANGE } from '@/constants/system/common-const'
import { TABLE_ID_CONST } from '@/constants/support/table-id-const'
import { QUERY_FORM_OP } from '@/constants/support/query-form-op-const'
import { useEnums } from '@/hooks/plugins/useEnums'
import { useResize } from '@/hooks/web/use-resize-hook'
const { getDescByValue } = useEnums()

// ----------------------------- 计算表格高度 -----------------------------
const { tableScrollY, expand } = useResize()

// ---------------------------- 表格列 ----------------------------

const columns = ref([
  {
    title: '单据编号',
    dataIndex: 'no',
    width: 180
  },
  {
    title: '交款人',
    dataIndex: 'payee_name'
  },
  {
    title: '交易流水号',
    dataIndex: 'trade_no'
  },
  {
    title: '交易凭证',
    dataIndex: 'voucher'
  },
  {
    title: '收款类型',
    dataIndex: 'pay_type'
  },
  {
    title: '收款金额',
    dataIndex: 'amount'
  },
  {
    title: '收款时间',
    dataIndex: 'create_time'
  },
  {
    title: '审核状态',
    dataIndex: 'status'
  },
  {
    title: '备注',
    dataIndex: 'remark'
  },
  {
    title: '操作',
    dataIndex: 'action',
    fixed: 'right',
    width: 100
  }
])

// ---------------------------- 查询数据表单和方法 ----------------------------
const { queryForm, tableData, tableLoading, total, resetQuery, onSearch, queryData } = useQuery({
  fetchDataApi: async (params) => {
    const res = await paymentApi.queryPaymentList(params)
    return {
      list: res.data.data,
      total: res.data.total
    }
  },
  queryFormFilter: {
    no: '',
    payee_name: '',
    create_time: DEFAULT_TIME_RANGE.value,
    pay_type: null,
    status: null,
    trade_no: ''
  },
  queryFormOp: {
    no: QUERY_FORM_OP['模糊查询'],
    payee_name: QUERY_FORM_OP['模糊查询'],
    create_time: QUERY_FORM_OP['范围查询'],
    pay_type: QUERY_FORM_OP['全等查询'],
    status: QUERY_FORM_OP['全等查询'],
    trade_no: QUERY_FORM_OP['模糊查询']
  }
})
onMounted(queryData)

// 选择表格行
const selectedRowKeyList = ref([])

function onSelectChange(selectedRowKeys) {
  selectedRowKeyList.value = selectedRowKeys
}

// ---------------------------- 添加/修改 ----------------------------
const formModal = ref()

function addGoods(goodsData) {
  formModal.value.showDrawer(goodsData)
}

// ---------------------------- 详情 ----------------------------
const detailRef = ref()

const detail = (goodsData) => {
  detailRef.value.showDrawer(goodsData)
}
// ------------------------------- 审核 ---------------------------------
const open = ref<boolean>(false)
const trade_no = ref('')
const id = ref('')
const checkAction = (row) => {
  id.value = row.id
  open.value = true
}
const handleOk = async () => {
  try {
    const res = await paymentApi.checkPayment({ id: id.value, trade_no: trade_no.value })
    message.success(res.msg)
  } finally {
    open.value = false
  }
}
</script>
